<template>
  <div class="bigbox">
    <div class="top">
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="用电企业">
              <FilterSelect2
                v-model="form.orgNo"
                :optionlist="selectList"
                :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="年度">
              <el-date-picker
                size="small"
                v-model="form.dateString"
                type="year"
                value-format="yyyy"
                format="yyyy"
                placeholder="选择年份"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="巡视性质">
              <FilterSelect2
                v-model="form.tourType"
                :optionlist="xsxzList"
                :valuekey="{ name: 'text', value: 'value' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>

          <el-col :span="9" style="text-align: right">
            <el-form-item>
              <Twobtn @chaxun="getList" @chongzhi="reset"></Twobtn>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main">
      <TopTile @command="command" @daochu="daochu" @shuaxin="getList"></TopTile>
      <div>{{ companyName }}人员-巡视情况统计</div>

      <div style="display: flex; height: 100%">
        <nt-table
          ref="singleTable"
          v-loading="loading"
          row-key="patrolPerson"
          highlight-current-row
          @current-change="handleCurrentChange"
          :issize="issize"
          :tableData="List"
          :tableConfig="tableConfig"
        >
        </nt-table>
        <div style="width: 50%; height: 100%">
          <nt-echart :loading="loading" :options="lineOptions"></nt-echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ntEchart from '@/components/nt-echart.vue'
import ntTable from '@/components/nt-table'
import TopTile from '@/components/TopTitle/index.vue'
import dayjs from 'dayjs'
import { exportexcel } from '@/utils/excel'
import { getCompanyApi, getDictionary1Api } from '@/api'
import { getListApi } from '@/api/patrol-situation/company-patrol/company-completion'
export default {
  components: { ntEchart, ntTable, TopTile },
  name: 'CompanyCompletion',
  data() {
    return {
      form: {
        orgNo: '',
        dateString: dayjs().format('YYYY')
      },
      currentRow: null,
      companyName: '',
      loading: false,
      List: [],
      Line: [],
      issize: 'medium',
      tableConfig: [
        {
          label: '用电企业',
          prop: 'orgName'
        },
        {
          label: '填报',
          prop: 'fill',
          align: 'right'
        },
        {
          label: '执行',
          prop: 'execute',
          align: 'right'
        },
        {
          label: '归档',
          prop: 'archive',
          align: 'right'
        },
        {
          label: '完成',
          prop: 'completion',
          align: 'right'
        },
        {
          label: '审核',
          prop: 'audit',
          align: 'right'
        },
        {
          label: '合计',
          prop: 'total',
          align: 'right'
        }
      ],
      selectList: [],
      xsxzList: [],
      statusList: []
    }
  },
  computed: {
    highlight() {
      if (this.currentRow) {
        return true
      } else {
        return false
      }
    },
    lineOptions() {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {},
        series: [
          {
            name: this.currentRow?.patrolPerson,
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.currentRow?.fill, name: '填报' },
              { value: this.currentRow?.execute, name: '执行' },
              { value: this.currentRow?.archive, name: '归档' },
              { value: this.currentRow?.audit, name: '审核' },
              { value: this.currentRow?.completion, name: '完成' }
            ]
          }
        ]
      }
    }
  },
  async created() {
    await this.getTreeList()
    await this.getXsxzList()
    await this.getStatusList()
    this.getList()
  },
  methods: {
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 列表单选
    handleCurrentChange(row) {
      if (this.currentRow == row) {
        this.currentRow = null
      } else {
        this.currentRow = row
      }
    },
    async getXsxzList() {
      const res = await getDictionary1Api('XSGL_XSXZ')
      this.xsxzList = res.data.list
    },
    async getStatusList() {
      const res = await getDictionary1Api('XSGL_RWDZT')
      this.statusList = res.data.list
    },
    async reset() {
      this.form.orgNo = this.selectList[0].bizOrgNo
      this.form.dateString = dayjs().format('YYYY')
      this.form.tourType = ''
    },
    getCompanyName() {
      this.companyName = this.selectList.find(
        (i) => i.bizOrgNo == this.form.orgNo
      )?.bizOrgName
    },
    async getTreeList() {
      const res = await getCompanyApi()
      this.selectList = res.data.list
      this.form.orgNo = this.selectList[0].bizOrgNo
      this.companyName = this.selectList[0].bizOrgName
    },
    async getList() {
      this.loading = true
      this.getCompanyName()
      const res = await getListApi({
        ...this.form
      })
      this.List = res.data.list
      if (this.List.length > 0) {
        await this.$refs?.singleTable.$refs?.table.setCurrentRow(
          res.data.list[0]
        )
      }
      // this.$refs.table.toggleRowSelection(res.data.list[0], true)
      this.loading = false
    },
    daochu() {
      exportexcel(
        '/pio-microservice-biz/pio/company/patrol/completion/exportExcel',
        {
          ...this.form
        },
        `${this.companyName}-巡视完成情况`
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.bigbox {
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .top {
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    height: 80px !important;
    width: 100% !important;
    margin-bottom: 10px;
    // transition-property: all;
    // transition-duration: 0.2s;
  }
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20px;
  }
}
</style>
